<template>
    <div class="dy_add">
        <el-row class="title">
            <el-col :span="22" :offset="2"><div class="grid-content bg-purple"><h1>新增动态</h1></div></el-col>
        </el-row>
        <el-row class="style_sel">
            <el-col :span="22" :offset="2"><div class="grid-content bg-purple">
                <span>动态样式</span>
                <el-radio-group v-model="radio">
                    <el-radio :label="1">三列式</el-radio>
                    <el-radio :label="2">左大1右2小</el-radio>
                    <el-radio :label="3">左小2右1大</el-radio>
                </el-radio-group>
            </div></el-col>
        </el-row>
        <el-row class="Upload">
            <el-col :span="10" :offset="2"><div class="grid-content bg-purple">
                第一张<span>{{load1}}</span><div slot="tip" class="el-upload__tip"></div>
                </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change='changeUpload1'
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">添加</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div></el-col>
        </el-row>
        <el-row class="Upload">
            <el-col :span="10" :offset="2"><div class="grid-content bg-purple">
                第二张<span>{{load2}}</span><div slot="tip" class="el-upload__tip"></div>
                </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change='changeUpload2'
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">添加</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div></el-col>
        </el-row>
        <el-row class="Upload">
            <el-col :span="10" :offset="2"><div class="grid-content bg-purple">
                第三张<span>{{load3}}</span><div slot="tip" class="el-upload__tip"></div>
                </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change='changeUpload3'
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">添加</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div></el-col>
        </el-row>
        <el-row class="Upload">
            <el-col :span="18" :offset="3"><div class="grid-content bg-purple">
                <el-button type="primary" @click="upLoad">立即提交</el-button>
            </div></el-col>
        </el-row>
    </div>
</template>

<script>
import config from '@/assets/js/config.js'
export default {
    data () {
      return {
        radio: 1,
        load1: "未上传",
        load2: "未上传",
        load3: "未上传",
        imgUrl1: "",
        imgUrl2: "",
        imgUrl3: "",
        baseUrl:config.baseUrl,
        dialogVisible: false,
        fileList: []
      }
    },
     methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      upLoad(){
          this.$submit.post(config.dynamicAdd,{
              img_url1:this.imgUrl1,
              img_url2:this.imgUrl2,
              img_url3:this.imgUrl3,
              type_id: this.radio
          }).then((res) => {
              console.log("上传成功",res);
              this.$router.push({
                name:"dynamic"
            });
          }).catch(function() {
              console.log("上传失败")
          })
      },
      changeUpload1(file, fileList){
        var formData = new FormData();
            formData.append("files",file.raw);
            this.$submit.post(config.upImg,formData).then(res=>{
                console.log(res);
                this.load1="已上传";
                this.imgUrl1=res.data.data.img_url;
                console.log(this.imgUrl1)
            }).catch(function(err){
                console.log("fail");
            })
        },
        changeUpload2(file, fileList){
        var formData = new FormData();
            formData.append("files",file.raw);
            this.$submit.post(config.upImg,formData).then(res=>{
                console.log(res);
                this.load2="已上传";
                this.imgUrl2=res.data.data.img_url;
                console.log(this.imgUrl2)
            }).catch(function(err){
                console.log("fail");
            })
        },
        changeUpload3(file, fileList){
        var formData = new FormData();
            formData.append("files",file.raw);
            this.$submit.post(config.upImg,formData).then(res=>{
                console.log(res);
                this.load3="已上传";
                this.imgUrl3=res.data.data.img_url;
                console.log(this.imgUrl3)
            }).catch(function(err){
                console.log("fail");
            })
	    }
    }
}
  
</script>

<style lang="scss" scoped>
    .dy_add{
        text-align: left;
        padding-top: 20px;
        .title{
            margin-bottom: 30px;
        }
        .style_sel{
            padding-left: 10px;
            margin-bottom: 40px;
            span{
                display: inline-block;
                margin-right: 20px;
            }
        }
        .Upload{
            font-size: 13px;
            padding-left: 20px;
            margin-bottom: 20px;
            span{
                margin-left: 10px;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }
        }
        .btn{
            margin-top: 10px;
            margin-bottom: 5px;
            .el-button{
                margin: 0;
            }
            
        }
    }
</style>
